<template>
	<view class="content" style="min-height: 100vh">
		<hx-navbar title="我的" :back="true" :fixedWhiteStyle="true" :fixed="false" :color="kblackColor"
			barPlaceholder="hidden" transparent="auto">
		</hx-navbar>
		<view class="container">
			<view class="collection_info">
				<image src="../../../static/logo.png" mode="aspectFit" class="collect_image"></image>
				<view class="title">AI大赛生图作品
					<view>
						*{{orderInfo.quantity}}
					</view>
				</view>
			</view>
			<view class="order_info_box">
				<block>
					<view class="order_info_item">
						订单编号
						<view class="color-3">
							{{ orderInfo.id || '' }}
						</view>
					</view>
					<view class="order_info_item">
						订单金额
						<view class="">
							￥{{orderInfo.totalAmount}}
						</view>
					</view>
					<view class="order_info_item">
						创建时间
						<view class="">
							{{ orderInfo.createTime }}
						</view>
					</view>
				</block>
			</view>
			<view class="pay_type_list" :style="[selStyle]" v-if="showSelect">
				<radio-group name="pay_type" @change="pay_type_change">
					<block>
						<view class="pay_item" v-if="walletStatus.xtStatus==1">
							<image :src="payments[1].icon" mode="aspectFill" class="pay_icon"></image>
							<view class="" style="flex: 1;">
								<view class="">
									{{ payments[1].name}}
								</view>
							</view>
							<radio :value="payments[1].code" active-color="yellow"
								:checked="current_code==payments[1].code" />
						</view>
						<view class="pay_item" v-if="walletStatus.hfStatus==1">
							<image :src="payments[0].icon" mode="aspectFill" class="pay_icon"></image>
							<view class="" style="flex: 1;">
								<view class="">
									{{ payments[0].name}}
								</view>
							</view>
							<radio :value="payments[0].code" active-color="yellow"
								:checked="current_code==payments[0].code" />
						</view>
						<view class="pay_item" v-if="walletStatus.sdStatus==1">
							<image :src="payments[2].icon" mode="aspectFill" class="pay_icon"></image>
							<view class="" style="flex: 1;">
								<view class="">
									{{ payments[2].name}}
								</view>
							</view>
							<radio :value="payments[2].code" active-color="yellow"
								:checked="current_code==payments[2].code" />
						</view>
					</block>
				</radio-group>
				<view class="pay_item" v-if="credits!=0 && credits!=null">
					<image :src="payments[3].icon" mode="aspectFill" class="pay_icon"></image>
					<view class="" style="flex: 1;">
						<view class="">
							{{ payments[3].name}}{{credits}}元
						</view>
					</view>
					<radio :checked="creditsRadio" @click="pay_credits_type_change()" active-color="yellow" />
				</view>
			</view>
			<view class="pay_type_list" :style="[selStyle]" v-else>
				<radio-group name="pay_type">
					<block>
						<view class="pay_item" v-if="payWay==2">
							<image :src="payments[0].icon" mode="aspectFill" class="pay_icon"></image>
							<view class="" style="flex: 1;">
								<view class="">
									{{ payments[0].name}}
								</view>
							</view>
							<radio :value="payments[0].code" active-color="yellow" checked />
						</view>
						<view class="pay_item" v-if="payWay==7">
							<image :src="payments[1].icon" mode="aspectFill" class="pay_icon"></image>
							<view class="" style="flex: 1;">
								<view class="">
									{{ payments[1].name}}
								</view>
							</view>
							<radio :value="payments[1].code" active-color="yellow" checked />
						</view>


						<view class="pay_item" v-if="payWay==5">
							<image :src="payments[2].icon" mode="aspectFill" class="pay_icon"></image>
							<view class="" style="flex: 1;">
								<view class="">
									{{ payments[2].name}}
								</view>
							</view>
							<radio :value="payments[2].code" active-color="yellow" checked />
						</view>
						<view class="pay_item" v-if="credits==0">
							<image :src="payments[3].icon" mode="aspectFill" class="pay_icon"></image>
							<view class="" style="flex: 1;">
								<view class="">
									{{ payments[3].name}}
								</view>
							</view>
							<radio :value="payments[3].code" active-color="yellow" checked />
						</view>
					</block>
				</radio-group>
				<view class="pay_item" v-if="credits!=0 && credits!=null">
					<image :src="payments[3].icon" mode="aspectFill" class="pay_icon"></image>
					<view class="" style="flex: 1;">
						<view class="">
							{{ payments[3].name}}{{credits}}元
						</view>
					</view>
					<radio :checked="creditsRadio" @click="pay_credits_type_change()" active-color="yellow" />
				</view>
			</view>
		</view>
		<uni-popup ref="bindingDialog" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'" :isMaskClick="false">
			<view class="store-view store-border-all tips-padding"
				:style="{'background':kbackgroundColor,color:knormalColor}"
				:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
				<text class="popup-title"></text>
				<text class="popup-subtitle">{{tiMesee}}</text>
				<view class="tips-bottom">
					<view class="tips-button"
						:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
						@click="bindingClose()">关闭</view>
					<view class="tips-button" :style="{background:kbuttonBgColor}" @click="czCheck()">去充值
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="openDialog" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'" :isMaskClick="false">
			<view class="store-view store-border-all tips-padding"
				:style="{'background':kbackgroundColor,color:knormalColor}"
				:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
				<text class="popup-title">提示</text>
				<text class="popup-subtitle">为了您的账号安全，请您设置支付密码后
					再进行操作!</text>
				<view class="tips-bottom">
					<view class="tips-button"
						:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
						@click="bindingClose2()">关闭</view>
					<view class="tips-button" :style="{background:kbuttonBgColor}" @click="bindingCheck()">去设置
					</view>
				</view>
			</view>
		</uni-popup>
		
		<view class="" style="height: 200rpx;"></view>
		<view class="obottom">
			<view class="" style="text-align: right;">
				<view class="">
					合计：￥{{totalAmount}}
				</view>
				<view class="">
					共减：￥ <text v-if="creditsRadio">{{credits}}</text> 
					<text v-else>0.00</text> 
				</view>
			</view>
			<view class="open_botton " @click="submit()">
				<text>提交订单</text>
			</view>
		<paypass ref="passbox" @confirm="set_done"></paypass>
		</view>
	
	</view>
</template>

<script>
	import paypass from '@/components/pay_pass/pay_pass.vue'
	export default {
		filters: {
			filterTime(val) {
				return uni.$u.timeFormat(parseInt(val), 'yyyy-mm-dd hh:MM:ss')
			}
		},	components: {
			paypass
		},
		// mixins: [orders],
		data() {
			return {
				tiMesee: "",
				selStyle: {
					'--selBcakborder': this.$store.state.selBcakborder,
					'--topicAdaptationColors': this.$store.state.topicAdaptationColors,
				},
				payments: [{
						id: 1,
						icon: '../../../static/image/payto.png',
						name: '汇付天下',
						code: 'huifupay'
					},
					{
						id: 2,
						icon: '../../../static/image/zwlogo.png',
						name: '系统钱包',
						code: 'balancepay'
					},
					{
						id: 3,
						icon: '../../../static/image/sandLogo.png',
						name: '杉德支付',
						code: 'sdpay'
					},
					{
						id: 4,
						icon: '../../../static/aipicture/ai-diamond-icon.png',
						name: '灵感星余额抵扣',
						code: 'deduction'
					},
				],
				creditsRadio: false,
				showSelect: true,
totalAmount:"",
Amount:"",
				current_code: null,
				buttonBcak: this.$store.state.buttonBcak, //按钮颜色
				orderId: 0,
				payWay: null,
				walletStatus: "",
				orderInfo: {},
				submiting:false,
				payVal:'',
				credits:"",//抵扣
				meseeDate:{},
				secondPassword:"",
				uid:''
			};
		},
		onLoad(options) {
			let queryString = options.data;
			this.orderInfo = JSON.parse(decodeURIComponent(queryString));
			let messageString = options.message;
			this.meseeDate= JSON.parse(decodeURIComponent(messageString));
			this.getWalletStatus()
			this.Amount=this.orderInfo.totalAmount
			this.totalAmount=this.Amount
			// if (val.status ) {
				var orcredits=this.orderInfo.credits*0.1
				 this.credits=orcredits.toFixed(2)
			// }
		},
		onShow() {
           this.submiting = false;
		   this.$api.pursedetailId(res => {
				if (res.status) {
				this.payVal= res.data.balance
				}

			})
			
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh()

			}, 1000)

		},
		methods: {
			getPay() {
				let aiPayStart = uni.getStorageSync('aiPayStart')
				console.log("-aiPayStart-",aiPayStart);
				if(aiPayStart){
					//验证支付支付
					this.$api.userInfo({}, res => {
						if (res.status) {
							let uid = uni.getStorageSync('aiOrderId').uid
							let aiOrderId = uni.getStorageSync('aiOrderId').aiOId
							if (res.data.uid == uid) {
								this.$api.aiCheckPay({
									aiOrderId: aiOrderId
								}, res => {
									if (res.status) {
										// uni.setStorageSync('aiPayStart','')
										// this.aiEventId = res.data.aiEventId
										// this.aiOrderId = res.data.aiOrderId
										uni.navigateTo({
											url:`/pages/aipicture/ai_create/ai_create`
										})
									} else {
										uni.navigateBack(1)
										return
									}
								})
							}
							// uni.setStorage('walletStatue', res.data.walletStatus)
						}
					})
				}
			},
			submit: function() {
				if (this.payWay == 7 || this.current_code == 'balancepay') {
					//小于余额提示 payVal 总余额     this.orderInfo.amount商品价格
				 if(parseInt(this.payVal)<parseInt(this.totalAmount)){
					 this.tiMesee='系统钱包余额不足'
					 	this.$refs.bindingDialog.open()
				 }else{
					 	this.payWay = 7
						this.ifPass()
			     }	return
				}
				if (this.current_code === 'huifupay') {
					this.payWay = 2
					 this.secondPassword=''
					 
					 if(this.creditsRadio){
						this.ifPass()
					 }else{
					  this.pay()
					 }
				} else if (this.current_code === 'sdpay') {
					this.payWay = 5
					this.secondPassword=''
					if(this.creditsRadio){
						this.ifPass()
					}else{
					 this.pay()
					}
				}
				let body = {
					orderId: this.orderId,
					type: this.nftType,
					payWay: this.payWay,
					nftIdList: this.nftIdList
				};
				if (!this.payWay) {
					uni.showToast({
						icon: 'none',
						title: '需要选择支付方式'
					})
					return false
				}
				if (!this.submiting) {
					this.submiting = true;
					setTimeout(() => {
						this.submiting = false
					}, 5000);
		    
				
				} else {
					this.$common.errorToShow('操作太快了稍后再试');
				}
			},
			ifPass(){
				var _this=this
					this.$api.checkSecondPassword({}, res => {
										if (res.status) {
											let data = res.data
											if (data.secondPassword) {
												_this.$refs.passbox.open();
											} else {
												_this.$refs.openDialog.open()
											}
										} else {
											_this.$common.errorToShow('网络异常');
										}
									})
				
			},
			fp(value) {
				if (!value) {
					return '0.00';
				}
				return Number(value / 100).toFixed(2)
			},
			czCheck(){
				this.$refs.bindingDialog.close()
				uni.navigateTo({
					url: '/pages/user/wallet_system/wallet_system'
				})
			},
			bindingCheck() {
				this.$refs.openDialog.close()
				uni.navigateTo({
					url: '/pages/user/settings/pay_pass/pay_pass'
				})
			},
			bindingClose2() {
				this.$refs.openDialog.close()
			},
			bindingClose() {
				this.$refs.bindingDialog.close()
			},
			set_done(pass) {
				this.secondPassword=pass
				this.pay()
		 	},
			//支付订单接口
				pay(){
					//1 用 2不用
					var isdia=2
					if(this.creditsRadio){
						isdia=1
					}else{
						isdia=2
					}
					let body = {
						orderId: this.orderInfo.id,
						type: 'A',
						payWay: this.payWay ,
						secondPassword: this.secondPassword,
						aiEventId:this.orderInfo.aiEventId,
						prompt:this.meseeDate.describe,
						isDiamond:isdia,
						refPic:this.meseeDate.refPic,//参考图
						reverseWords:this.meseeDate.reverseWords,
						money:this.totalAmount,
						proportion:this.meseeDate.proportionNum,
						imageNumber:this.meseeDate.imageNumber
					};
					this.$api.aiOrderPay(body,res=>{
						if(res.status){
							var aiOrderId={
								uid:this.uid,
								aiOId:this.orderInfo.id
							}
							uni.setStorageSync('aiOrderId',aiOrderId)
							if(res.data==null){
								this.$common.errorToShow('支付成功');
								uni.redirectTo({
									url: '/pages/payment/result_system?payNum=' + this.totalAmount+'&ai=Ai'+'&aiEventId='+this.orderInfo.aiEventId
									// +'&orderId='+res.orderId
								})
							}else{
							 
								let url = res.data;
								// #ifdef H5
								window.location.href = url;
								// #endif
								// #ifdef APP-PLUS
								if(this.payWay==2){
									uni.navigateTo({
										url: '/pages/payment/aiapp-webview?ai=isAI&iftype=hf&url=' + url
									})
								}else{
									
									// uni.setStorageSync('sdUrl', url);
									// uni.navigateTo({
									//   url: `/pages/user/webview/sdWebview`
									// })
									uni.setStorageSync('sdUrl', url);
									uni.navigateTo({
										url: `/pages/payment/aiapp-webview?ai=isAI&iftype=sd`
									})
								}
								//#endif
							}
						
						}else if(!res.status && res.code==1001){
							this.$common.errorToShow(res.message);
							uni.redirectTo({
								url:'/pages/aipicture/mine/diamond-list'
							})
						} else{
							this.$common.errorToShow(res.message);
						}
					})
				
				},
			getWalletStatus() {
				this.$api.userInfo({}, res => {
					if (res.status && res.data.walletStatus) {
						this.walletStatus = res.data.walletStatus;
						this.uid=res.data.uid
						// uni.setStorage('walletStatue', res.data.walletStatus)
					}
				})
				this.$api.getAiDiamond({}, val => {
					if (val.status ) {
						// this.credits=val.data.balance*0.1
					}
				})
			},
			pay_type_change: function(e) {
				this.$emit('change_type', e.detail.value)
				this.current_code = e.detail.value;
			},
			pay_credits_type_change() {
				this.creditsRadio = !this.creditsRadio
				  if(this.creditsRadio){
					this.totalAmount= parseFloat((this.Amount-this.credits).toFixed(2))
					this.totalAmount= parseFloat((this.Amount-this.credits).toFixed(2))
				}else{
					this.totalAmount=this.Amount
					this.totalAmount=this.Amount
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	uni-page-body,
	html,
	body {
		height: 100%;
		background-color: white !important;
		// background-color: var(kbackgroundColor);
	}
	
	.container {
		width: 100%;
		padding: 0 40rpx;
		margin-top: 40rpx;

	}

	.collection_info {
		width: 100%;
		background: #EEEEEE;
		padding: 20rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;

		.collect_image {
			width: 180rpx;
			height: 180rpx;
			margin-right: 22rpx;
		}

		.title {
			font-size: 28rpx;
			color: #000;
			font-weight: 400;
		}

	}

	.pay_type_list {
		width: 100%;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background: #EEEEEE;
	}

	// .choose_title {
	// 	height: 100rpx;
	// 	width: 100%;
	// 	display: flex;
	// 	align-items: center;
	// 	font-size: 28rpx;
	// 	font-weight: bold;
	// 	color: #fff;
	// }
	.order_info_item {
		padding: 10rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666;
		font-weight: 400;
	}

	.order_info_box {
		width: 100%;
		background: #EEEEEE;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}


	.uni-group {
		display: flex;
		align-items: center;
	}

	//表格
	.table-container {
		margin-top: 29rpx;
		width: 100%;
		border-collapse: collapse;
	}

	.table-header {
		width: 100%;
	}

	.table-header,
	.table-row {
		display: flex;
		align-items: center;
	}

	.table-cell {
		// flex: 1;
		height: 110rpx;
		padding: 10rpx 6rpx;
		border: 1px solid #e7e7e7;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		word-break: break-all;
	}

	.error-message {
		color: red;
		text-align: center;
		margin-top: 10px;
	}

	.activity_detail_purple {
		box-shadow: 2rpx 2rpx 12rpx 4rpx #51515166;
		background-clip: padding-box, border-box;
		box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(254, 162, 221, 0.91);
		background-color: #fff;
	}

	.activity_detail_black {
		border: 6px solid transparent;
		border-radius: 16px;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to right, #ffffffe6, #ffffffe6), linear-gradient(180deg, rgba(244, 249, 123, 1), rgba(84, 203, 122, 1));
	}

	.pay_icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 30rpx;

	}

	.pay_item {
		width: 100%;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #d4d4d4;

		/* background-color: #fff; */
		/* box-shadow: 0rpx -5rpx 10rpx 1rpx rgba(0, 0, 0, 0.16); */
		height: 100rpx;
		/* margin-bottom: 30rpx; */
		box-sizing: border-box;
		// border-radius: 20rpx;
	}

	/deep/ .uni-radio-input.uni-radio-input-checked {
		border: 1px solid #6C58D5 !important;
		background: #6C58D5 !important;
	}

	/deep/ uni-radio .uni-radio-input {
		width: 26rpx;
		height: 26rpx;
		// border-color: #E98589 !important;
	}

	.obottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		padding: 30rpx 70rpx;
		font-weight: 500;
		font-size: 28rpx;
		position: fixed;
		background: #C9C9C9;
    left: 0;
    bottom: 0;
    z-index: 10;
		margin: 0;border: 3rpx solid  #C9C9C9;
	}

	.open_botton {
		// margin: 30rpx auto;
		width: 260rpx;
		height: 82rpx;
		background: linear-gradient(-90deg, #6C58D5, #AA56D7);
		text-align: center;
		border-radius: 42rpx;
		margin-left: 30rpx;

		text {
			color: white;
			height: 82rpx;
			display: block;
			line-height: 80rpx;

		}
	}
</style>